<template>
  <div class="main-layout">
    <!-- Main Content -->
    <div class="main-content">
      <router-view />
    </div>

    <!-- Bottom Navigation -->
    <van-tabbar v-model="activeTab" @change="onTabChange" fixed placeholder safe-area-inset-bottom>
      <van-tabbar-item name="home" icon="home-o">
        Home
      </van-tabbar-item>
      <van-tabbar-item name="training" icon="play-circle-o">
        Training
      </van-tabbar-item>
      <van-tabbar-item name="community" icon="friends-o" :badge="communityBadge">
        Community
      </van-tabbar-item>
      <van-tabbar-item name="profile" icon="user-o">
        Profile
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const activeTab = ref('home')
const communityBadge = ref(3) // Mock notification count

// Update active tab based on current route
watch(() => route.path, (newPath) => {
  if (newPath.startsWith('/training')) {
    activeTab.value = 'training'
  } else if (newPath.startsWith('/community')) {
    activeTab.value = 'community'
  } else if (newPath.startsWith('/profile')) {
    activeTab.value = 'profile'
  } else {
    activeTab.value = 'home'
  }
}, { immediate: true })

const onTabChange = (name: string) => {
  switch (name) {
    case 'home':
      router.push('/')
      break
    case 'training':
      router.push('/training')
      break
    case 'community':
      router.push('/community')
      break
    case 'profile':
      router.push('/profile')
      break
  }
}
</script>

<style lang="scss" scoped>
.main-layout {
  min-height: 100vh;
  background: $background-color;
}

.main-content {
  padding-bottom: $tabbar-height;
}
</style>